<template>
  <div class="catelist">
    <div
      v-for="it in cate.lsChildClass"
      :key="it.id"
      class="cate-item"
    >
      <div class="title">
        <div class="tag">
          {{ it.cName }}
        </div>
        <div class="cate-child">
          <span
            v-for="(item, index) in it.lsChildClass"
            :key="item.id"
            @click="topList(item)"
          >{{ item.cName }}
            <span v-if="index != it.lsChildClass.length - 1">/ </span></span>
        </div>
      </div>
      <div class="top-one">
        <img
          :src="it.AdfullImageUrl"
          alt=""
        >
      </div>
      <div class="top-other">
        <el-carousel
          :interval="5000"
          arrow="always"
          height="31.44rem"
          indicator-position="none"
        >
          <el-carousel-item
            v-for="(items, index) in it.count"
            :key="index"
          >
            <div
              v-for="(item, str) in it.goodsList"
              v-if="str < (index + 1) * 4 && str >= index * 4"
              :key="item.pid"
              class="goods-item"
              @click="toDetail(item)"
            >
              <div>
                <img
                  :src="item.defaultAlbum"
                  alt=""
                  class="goods-img"
                >
                <div class="goods-info">
                  <p
                    class="name"
                    :title="item.pName"
                  >
                    {{ item.pName }}
                  </p>
                  <p
                    class="desc"
                    :title="item.cProductShowName"
                  >
                    {{ item.cProductShowName }}
                  </p>
                  <p class="price">
                    <span>￥</span> {{ item.fSalePrice }}
                  </p>
                  <p class="button">
                    立即购买
                  </p>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="more">
        <img
          src="../../assets/img/logo2.png"
          alt=""
          @click="topList(it)"
        >
      </div>
    </div>
    <!-- <div class="more">点击加载更多</div> -->
  </div>
</template>

<script>
	export default {
		name: "",
		components: {},
		data() {
			return {
				cate: {},
			};
		},
		methods: {
			topList(item) {
				sessionStorage.setItem('CateDetailID', item.id)
				this.$router.push({
					path: "/cateDetail?id=" + item.id,
				});
			},
			getData(id) {
				this.cate = {};
				this.$api.home.getClasses().then((res) => {
					if (res.code == 200) {
						res.data.forEach((item) => {
							if (item.id == id) {
								this.cate = item;
								this.getGoods(this.cate);
							}
						});
					}
				});
			},
			getGoods(item) {
				item.lsChildClass.forEach((str) => {
					this.getList(str);
				});
			},
			getList(item) {
				let data = {
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: 1,
						pagesize: 16,
						where: [{
							fieldname: "categoryid",
							valuefrom: item.id,
						}, ],
					},
				};
				this.$api.home.getProductList(data).then((res) => {
					if (res.code == 200) {
						this.$set(item, "goodsList", res.data.data);
						this.$set(item, "count", Math.ceil(res.data.data.length / 4));
					}
				});
			},
			toDetail(item) {
				this.$router.push({
					path: `/fruit/detail?id=${item.pid}`,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.catelist {
		padding: 0 16.19rem;
		display: flex;
		flex-direction: column;
		margin-top: 1.88rem;

		.cate-item {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.tag {
					width: 11.25rem;
					height: 3.44rem;
					background: rgba(0, 0, 0, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.5rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(234, 234, 234, 1);
				}

				.cate-child {
					font-size: 0.88rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					cursor: pointer;

					&>span:hover {
						color: #08c19d;
					}
				}
			}

			.top-one {
				margin-top: 1.25rem;

				img {
					width: 100%;
					height: 22.13rem;
					object-fit: contain;
				}
			}

			.top-other {
				margin-top: 1.25rem;
				margin-bottom: 1.25rem;

				.el-carousel__item {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.goods-item {
						width: 24%;
						height: 100%;
						background: #fff;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						position: relative;
						margin-right: 1.333333%;
						cursor: pointer;

						&:nth-child(4n) {
							margin-right: 0;
						}

						.goods-img {
							width: 14rem;
							height: 14rem;
							object-fit: contain;
						}

						.goods-info {
							display: flex;
							flex-direction: column;
							text-align: center;
							padding: 0 1rem;

							.name {
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(32, 32, 32, 1);
								max-width: 13rem;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.desc {
								font-size: 0.88rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(157, 157, 157, 1);
								margin-top: 0.81rem;
								max-width: 13rem;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
								margin-top: 0.94rem;

								span {
									font-size: 0.88rem;
									color: #000;
								}
							}

							.button {
								width: 11.76rem;
								height: 2.53rem;
								background: rgba(0, 0, 0, 1);
								border-radius: 1rem;
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(255, 255, 255, 1);
								display: flex;
								justify-content: center;
								align-items: center;
								margin-top: 0.75rem;
							}
						}
					}
				}
			}

			.more {
				height: 2.5rem;
				background: rgba(0, 0, 0, 1);
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 0 1.44rem;

				img {
					width: 7.38rem;
					cursor: pointer;
				}
			}
		}

		.more {
			font-size: 1rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 1.95rem;
			text-align: center;
			margin: 3.13rem auto;
			cursor: pointer;
		}
	}
</style>
